<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue02</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
       
    <ul id="id-1">
        <li v-for="item in items">
            {{item.messsage}}
        </li>
    </ul>

    <ul id="id-2">
        <li v-for="(item, index) of items">
          {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
      </ul>
      
    <ul id="id-3">
        <li v-for="(key,value) in object">
            {{value}} {{key}}
        </li>
    </ul>

    <script>
         var vm = new Vue({
             el:'#id-1',
             data:{
                 items:[
                     {
                         messsage:'hellow'
                     },{
messsage: '身份疲惫'
                     },{
messsage:'优特纸质'
                     }
                 ]
             }
         })

         var vm2 = new Vue({
             el:'#id-2',
             data:{
                 parentMessage:'vue大法好',
                 items:[
                     {
                         message:'绵羊油的水',
                     },{
message:'视频检验'
                     },{
message:'vscode'
                     }
                 ]
             }
         })

         new Vue({
             el:'#id-3',
             data:{
                 object:{
                     firstname:'zhaoyingxiang',
                     lastname:'hanjianghifanxueyuan',
                     phone:6565215565
                 }
             }
         })
    </script>
</body>
</html>